<template>
  <div>
    <el-tree
      :data="data"
      node-key="id"
      default-expand-all
      @node-drag-start="handleDragStart"
      @node-drag-enter="handleDragEnter"
      @node-drag-leave="handleDragLeave"
      @node-drag-over="handleDragOver"
      @node-drag-end="handleDragEnd"
      @node-drop="handleDrop"
      draggable
      :show-checkbox="showCheckBox"
      :allow-drop="allowDrop"
      :allow-drag="allowDrag"
      :props="defaultProps"
      @node-click="click"
      :default-checked-keys="treeDataSelect"
      ref="menutree"
      @check-change="checkChange"
      check-strictly
    >
    </el-tree>
  </div>
</template>

<script>
import { findAllMenu, updateMenuFID } from "../api/menu";
import {
  findCheckedID,
  removeMenuByRoleID,
  addMenuByRoleID
} from "../api/role";

export default {
  props: ["showCheckBox", "roleID"],
  created() {
    this.initMenu();
    this.getCheckedID(this.roleID);
  },
  data() {
    return {
      data: [],
      defaultProps: {
        children: "rbacMenus",
        label: "menuname",
        id: "id"
      },
      treeDataSelect: [4, 14],
      keys: []
    };
  },
  methods: {
    initMenu() {
      const userdataStr = localStorage.getItem("userdata");
      const userdata = JSON.parse(userdataStr);

      findAllMenu()
        .then(res => {
          this.data = res.data;
          console.log(this.data);
        })
        .catch();
    },
    handleDragStart(node, ev) {
      //   console.log("drag start", node);
    },
    handleDragEnter(draggingNode, dropNode, ev) {
      //   console.log("tree drag enter: ", dropNode.label);
    },
    handleDragLeave(draggingNode, dropNode, ev) {
      //   console.log("tree drag leave: ", dropNode.label);
    },
    handleDragOver(draggingNode, dropNode, ev) {
      //   console.log("tree drag over: ", dropNode.label);
    },
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      //   console.log("tree drag end: ", dropNode && dropNode.label, dropType);
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      let id = draggingNode.data.id;
      let fid;
      console.log("拖动", draggingNode, dropType);
      console.log("到", dropNode, dropType);

      if (dropType === "inner") {
        fid = dropNode.data.id;
      } else {
        if (dropNode.parent.parent != null) {
          fid = dropNode.parent.data.id;
        } else {
          fid = 0;
        }
      }
      updateMenuFID(id, fid)
        .then()
        .catch();
    },
    allowDrop(draggingNode, dropNode, type) {
      //   if (dropNode.data.label === "二级 3-1") {
      //     return type !== "inner";
      //   } else {
      //     return true;
      //   }
      return true;
    },
    allowDrag(draggingNode) {
      return true;
    },
    click(a1) {
      // console.log(a1);
      this.$emit("clickNode", a1);
    },
    getCheckedID(roleID) {
      const userdataStr = localStorage.getItem("userdata");
      const userdata = JSON.parse(userdataStr);
      //查找菜单ID并设置到树形控件中
      findCheckedID(roleID)
        .then(res => {
          // this.checkedCount = res.data.length;
          this.keys = res.data;
          this.$refs.menutree.setCheckedKeys(res.data);
          // this.treeDataSelect = res.data;
        })
        .catch();
    },
    checkChange(a1, a2) {
      // console.log(a1);
      // let flag = this.keys.includes(a1.id);
      // if (flag === true) {
      //   removeMenuByRoleID(this.roleID, a1.id)
      //     .then(res => {
      //       this.getCheckedID(this.roleID);
      //     })
      //     .catch();
      // } else if (flag === false) {
      //   addMenuByRoleID(this.roleID, a1.id)
      //     .then(res => {
      //       this.getCheckedID(this.roleID);
      //     })
      //     .catch();
      // }
      let checkedKeys = this.$refs.menutree.getCheckedKeys();
      this.$emit("checkedKeysChange", checkedKeys);
    },
    sb() {}
  },
  watch: {
    roleID: {
      handler(newValue, oldValue) {
        //角色ID发生变化则获取角色所拥有的菜单
      },
      //这个设置 可以让第一次点击，也触发这个监听事件
      immediate: true
    }
  }
};
</script>